<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>乐廊英语</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script src="../../assets/js/base.js"></script>
    <link rel="stylesheet" href="../../assets/css/home.css">
</head>

<body>
    <!-- 绝对定位学习按钮 -->
    <div class="fixed-btn study-btn align-center justify-center">
        <span class="txt">学习任务</span>
        <span class="iconfont llzizhuxuexi"></span>
    </div>
    <div class="fixed-btn study-review align-center justify-center">
        <span class="txt">智能复习</span>
        <span class="iconfont llkuaisufuxi" style="margin-top: 2rem;"></span>
    </div>

    <header class="align-center header">
        <img class="logo" src="../../assets/images/logo.png" />
        <span class="nav active" onclick="handleChangeMainView(0)">首页</span>
        <span class="nav choise-center" href="#">选课中心</span>
        <a class="nav" href="#">用户中心</a>
        <a class="nav" href="#">习激励榜</a>
        <a class="nav" href="../gift/index.html">奖品列表</a>
        <a class="help-link" href="#">帮助</a>
        <div class="login-out">退出</div>
    </header>

    <!-- 选项组 -->
    <section class="menu align-center">
        <div class="menu-item flex-wid">
            <img src="../../assets/images/home_menu/index-top-img1.png" />
            <div class="flex-wid">
                <div class="title">单词基础</div>
                <div class="label">智能听写</div>
            </div>
        </div>
        <div class="menu-item flex-wid" onclick="handleChangeMainView(7)">
            <img src="../../assets/images/home_menu/index-top-img2.png" />
            <div class="flex-wid">
                <div class="title">记忆曲线</div>
                <div class="label">智能复习</div>
            </div>
        </div>
        <div class="menu-item flex-wid" onclick="handleChangeMainView(5)">
            <img src="../../assets/images/home_menu/index-top-img3.png" />
            <div class="flex-wid">
                <div class="title">DCL-T</div>
                <div class="label">同步测试</div>
            </div>
        </div>
        <div class="menu-item flex-wid" onclick="handleChangeMainView(6)">
            <img src="../../assets/images/home_menu/index-top-img4.png" />
            <div class="flex-wid">
                <div class="title">预留模块</div>
                <div class="label">词汇量测试</div>
            </div>
        </div>
        <div class="menu-item flex-wid" onclick="handleChangeMainView(4)">
            <img src="../../assets/images/home_menu/index-top-img5.png" />
            <div class="flex-wid">
                <div class="title">学习报告</div>
                <div class="label">数据统计</div>
            </div>
        </div>
        <div class="menu-item flex-wid" onclick="handleChangeMainView(2)">
            <img src="../../assets/images/home_menu/index-top-img6.png" />
            <div class="flex-wid">
                <div class="title">单词本</div>
                <div class="label">我的单词</div>
            </div>
        </div>
    </section>

    <!-- 主题内容 -->
    <main class="flex main">
        <aside class="aside">
            <div class="user-info">
                <div class="align-center">
                    <img class="avatar" src="../../assets/images/avatar.png" />
                    <div class="flex-wid">
                        <div class="user-name">新用户52689898</div>
                        <div class="label">
                            新兵 VIP有效时间: 2024-12-24 -2024-12-24
                        </div>
                    </div>
                </div>
                <div class="align-center">
                    <div class="item sign-btn">签到</div>
                    <div class="item test-btn">测试次数 88</div>
                </div>
                <div class="card">
                    <div class="align-center">
                        <div class="card-item">
                            <div class="time">6天</div>
                            <div class="label">累计坚持</div>
                        </div>
                        <div class="card-item">
                            <div class="time">20词</div>
                            <div class="label">累计学习</div>
                        </div>
                        <div class="card-item">
                            <div class="time">40词</div>
                            <div class="label">今日掌握</div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="article subscription">
                <div class="title">我的订阅</div>
                <div class="row subscription-row" data-main="1">
                    <div class="name">精品《写作热爱生活，热爱写作》教学课件.PPTX</div>
                    <div class="time">2022-12-24 24:24:24</div>
                </div>
                <div class="row">
                    <div class="name">精品《写作热爱生活，热爱写作》教学课件.PPTX</div>
                    <div class="time">2022-12-24 24:24:24</div>
                </div>
                <div class="row">
                    <div class="name">精品《写作热爱生活，热爱写作》教学课件.PPTX</div>
                    <div class="time">2022-12-24 24:24:24</div>
                </div>
            </div>
            <div class="article">
                <div class="title">已完成课程</div>
                <div class="no-more">没有课程需要续订</div>
            </div>
        </aside>

        <!--  -->
        <section class="content flex-wid" data-main="0">
            <div class="title">单词基础</div>
            <input class="search" placeholder="单词基础:以单词为核心，对单词，句子等进行基础与提高学习，并且可就全书范围进行智能听写" />

            <div class="box flex-hei box-menu">
                <img class="menu-bg" src="../../assets/images/index-menu.png" />
                <div class="tag tag-lt">单词突击必修课 <span>正在学习的课程</span></div>
                <div class="tag tag-lb">上次学到的单词 <span>BAD</span></div>
                <div class="tag tag-rt">上次学到的单词 <span>BAD</span></div>
                <div class="tag tag-rb">单词突击必修课 <span>正在学习的课程</span></div>
            </div>
        </section>

        <!-- 我的订阅 -->
        <section class="content flex-wid flex-column" data-main="1">
            <div class="title">初中版体验课</div>
            <input class="search" placeholder="单词基础:以单词为核心，对单词，句子等进行基础与提高学习，并且可就全书范围进行智能听写" />
            <div class="box flex-hei subscription-box flex-column">
                <div class="title f16">综合复习</div>
                <div class="flex flex-wrap subscription-menu">
                    <div class="subscription-item">对比测试</div>
                    <div class="subscription-item">智能听写</div>
                    <div class="subscription-item">精准复习</div>
                    <div class="subscription-item">本书测试</div>
                    <div class="subscription-item">一测到底</div>
                    <div class="subscription-item">稍长文案展示测试</div>
                    <div class="subscription-item">考试</div>
                </div>
                <div class="subscription-list">
                    <div class="subscription-list-item active">单词学习</div>
                    <div class="subscription-list-item">自主测试</div>
                    <div class="subscription-list-item">单词学习错题本</div>
                    <div class="subscription-list-item">单元测试</div>
                    <div class="subscription-list-item">单元听写</div>
                    <div class="subscription-list-item">单元听写错题本</div>
                </div>
                <div class="flex-wrap flex-hei subscription-card-wrap">
                    <div class="subscription-card subscription-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                    </div>
                    <div class="subscription-card subscription-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 2</span>
                    </div>
                    <div class="subscription-card subscription-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 3</span>
                    </div>
                    <div class="subscription-card subscription-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 4</span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 5</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 6</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 7</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="subscription-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 8</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                </div>
            </div>
        </section>

        <!-- 单词本 -->
        <section class="content flex-wid flex-column" data-main="2">
            <div class="title">单词本</div>
            <div class="vocabulary-search align-center color_6">
                <input class="radio" type="radio" value="0" checked="checked"></input>
                <span class="radio-value">字母顺序</span>
                <input class="radio" type="radio" value="1"></input>
                <span class="radio-value">熟悉程度</span>
                <span>每页单词书：</span>
                <select>
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                </select>
                <div class="rest-btn open-vocabulary-dialog">重新获取</div>
                <div class="tag bg-e8a8">生词</div>
                <div class="tag bg-90d5">夹生词</div>
                <div class="tag bg-a6d6">熟词</div>
            </div>
            <!-- 暂无数据 -->
            <div class="vocabulary-no-more flex-hei">
                <img src="../../assets/images/vocabulary-no-more.png" alt="">
                <span class="tips">所选类型单词暂无，请重新选择</span>
            </div>
        </section>

        <!-- 词汇量测试 -->
        <section class="content flex-wid" data-main="3">
            <div class="title">词汇量测试</div>
            <input class="search" placeholder="针对进行词汇量测试，来检测您掌握的词汇量情况" />
            <img src="../../assets/images/report-no-more.png" alt="" class="report-no-more">
            <button class="vocabulary-test-start">开始测试</button>
        </section>

        <!-- 学习报告 -->
        <section class="content flex-wid" data-main="4">
            <div class="flex-column" style="width: 100%;height:100%;">
                <div class="title">学习报告</div>
                <input class="search" placeholder="学习报告展现了最近一周每天学习的单词次数量，学习时间；本月学习时间；以及测试成绩等数据" />
                <div class="flex-hei echarts-wrap report-wrapper" data-report="0">
                    <div class="echarts" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="1">
                    <div class="echarts" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="2">
                    <div class="echarts" style="width: 100%;height: 100%;"></div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="3">
                    <div class="report-table flex-column">
                        <div class="report-thead report-calendar">
                            <div>序号</div>
                            <div>课本</div>
                            <div>测试类型</div>
                            <div>单元</div>
                            <div>测试时间</div>
                            <div>测试耗时</div>
                            <div>分数</div>
                            <div>通过</div>
                        </div>
                        <div class="report-table-body">
                            <div class="report-tr report-calendar">
                                <div>999</div>
                                <div>学段测试</div>
                                <div>学段测试</div>
                                <div>小学小升初分类词汇</div>
                                <div>2023-07-15 00:37</div>
                                <div>49秒</div>
                                <div>12</div>
                                <div class="color_71c4">是</div>
                            </div>
                            <div class="report-tr report-calendar">
                                <div>999</div>
                                <div>学段测试</div>
                                <div>学段测试</div>
                                <div>小学小升初分类词汇</div>
                                <div>2023-07-15 00:37</div>
                                <div>49秒</div>
                                <div>12</div>
                                <div class="color_e8a8">否</div>
                            </div>
                            <div class="report-wrapper-more f17">[ 暂无测试成绩 ]</div>
                        </div>
                    </div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="4">
                    <div class="report-table flex-column">
                        <div class="report-thead report-type">
                            <div>序号</div>
                            <div>测试类型</div>
                            <div>测试内容</div>
                            <div>测试时间</div>
                            <div>测试耗时</div>
                            <div>分数</div>
                            <div>通过</div>
                        </div>
                        <div class="report-table-body">
                            <div class="report-tr report-type">
                                <div>999</div>
                                <div>学段测试</div>
                                <div>小学小升初分类词汇</div>
                                <div>2023-07-15 00:37</div>
                                <div>49秒</div>
                                <div>12</div>
                                <div class="color_71c4">是</div>
                            </div>
                            <div class="report-tr report-type">
                                <div>999</div>
                                <div>学段测试</div>
                                <div>小学小升初分类词汇</div>
                                <div>2023-07-15 00:37</div>
                                <div>49秒</div>
                                <div>12</div>
                                <div class="color_e8a8">否</div>
                            </div>
                            <div class="report-wrapper-more f17">[ 暂无测试成绩 ]</div>
                        </div>
                    </div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="5">
                    <div class="report-table flex-column">
                        <div class="report-thead report-time">
                            <div>序号</div>
                            <div>测试类型</div>
                            <div>分数</div>
                            <div>测试耗时</div>
                            <div>测试时间</div>
                        </div>
                        <div class="report-table-body">
                            <div class="report-tr report-time">
                                <div>999</div>
                                <div>学段测试</div>
                                <div>12000</div>
                                <div>1分49秒</div>
                                <div>2023-07-15 00:37</div>
                            </div>
                            <div class="report-wrapper-more f17">[ 暂无测试成绩 ]</div>
                        </div>
                    </div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="6">
                    <div class="report-table flex-column">
                        <div class="justify-center align-center f17 report-option">
                            <span class="f_weight">2023年07月16日学习教材</span>
                            <select name="" id="">
                                <option value="1">自然拼读入门课（升级版）</option>
                            </select>
                            <div class="report-search">搜索</div>
                        </div>
                        <div class="report-sum-up flex-hei">
                            <div class="report-sum-tips">学习小结</div>
                            <div class="report-sum-row f17 f_weight">
                                <div>学习内容</div>
                                <div>学习结果</div>
                            </div>
                            <div class="report-sum-row f16 color_6">
                                <div>今日学习单词数 </div>
                                <div class="color_576f">15个</div>
                            </div>
                            <div class="report-sum-row f16 color_6">
                                <div>初步掌握单词数</div>
                                <div class="color_71c4">学习结果</div>
                            </div>
                            <div class="report-sum-row f16 color_6">
                                <div>待强化熟悉单词</div>
                                <div class="color_e8a8">3个</div>
                            </div>
                            <div class="report-sum-row f16 color_6">
                                <div>当前学习到的单元</div>
                                <div class="color_576f">unit 1</div>
                            </div>
                            <div class="report-sum-row f16 color_6">
                                <div>今日学习单元数</div>
                                <div class="color_3">1个</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="flex-hei echarts-wrap report-wrapper" data-report="7">
                    <div style="height: 100%;width: 100%;" class="flex-column">
                        <div class="flex-hei justify-center">
                            <img src="../../assets/images/ebbing.png" alt="记忆曲线" class="ebbing-img">
                            <div class="ebbing-label">德国心理学家艾宾浩斯(H.Ebbinghaus）研究发现，遗忘在学习之后立即开始，而且遗忘的进程并不是均匀的。最初遗忘速度很快，以后逐渐缓慢。他认为"保持和遗忘是时间的函数"，他用无意义音节（由若干音节字母组成、能够读出、但无内容意义即不是词的音节）作记忆材料，用节省法计算保持和遗忘的数量。 并根据他的实验结果绘成描述遗忘进程的曲线，即著名的艾宾浩斯记忆遗忘曲线。</div>
                        </div>
                        <div class="ebbing-tips f16">
                            <span>你约有</span>
                            <span class="f24 color_576f f_weight">0</span>
                            <span>个单词需要复习</span>
                        </div>
                        <button class="vocabulary-test-start">开始复习</button>
                    </div>
                </div>
                <div class="justify-end align-center color_576f f20 f_weight report-chart-footer">
                    <span class="iconfont llchangjianwenti echarts-menu" data-echarts="7"></span>
                    <span class="iconfont lla-zu1195 echarts-menu" data-echarts="0"></span>
                    <span class="iconfont lla-zu1198 echarts-menu" data-echarts="1"></span>
                    <span class="iconfont lla-zu1199 echarts-menu" data-echarts="2"></span>
                    <span class="iconfont lla-zu1202 echarts-menu" data-echarts="3"></span>
                    <span class="iconfont lla-zu1205 echarts-menu" data-echarts="4"></span>
                    <span class="iconfont lla-zu1208 echarts-menu" data-echarts="5"></span>
                    <span class="iconfont lla-zu1211 echarts-menu" data-echarts="6"></span>
                </div>
            </div>
        </section>

        <!-- DCL-T 同步测试 00 -->
        <section class="content flex-wid" data-main="5">
            <div class="flex-column dcl-content">
                <div class="title color_576f">DCL-T</div>
                <div class="search">针对每个学段进行单词量同步测试，来检测每个学段您掌握的单词量情况</div>
                <div class="flex-hei dcl-options-wrap">
                    <div class="dcl-options-title justify-center align-center">
                        <span class="color_576f">您是第</span>
                        <span class="color_e8a8 f_weight f24">10086</span>
                        <span class="color_576f">位测试者</span>
                    </div>
                    <div class="dcl-options-row flex f16">
                        <div class="label color_6">CSFS：</div>
                        <div class="dcl-radio-group flex-wid">
                            <div class="align-center">
                                <input type="radio">
                                <label>XD-T</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>XN-T</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>FC-T</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>JS-T</label>
                            </div>
                        </div>
                    </div>
                    <div class="dcl-options-row flex f16">
                        <div class="label color_6">CSXD：</div>
                        <div class="dcl-radio-group flex-wid">
                            <div class="align-center">
                                <input type="radio">
                                <label>7--12</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>13--15</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>16--18</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>19--23</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>CET-4</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>CET-6</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>KY</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>TF</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>YS</label>
                            </div>
                        </div>
                    </div>
                    <div class="dcl-options-row flex f16" style="padding-top: 10rem;">
                        <div class="label color_6">CSBB：</div>
                        <div class="dcl-select flex-wid">
                            <select>
                                <option value="">请选择</option>
                                <option value="">1</option>
                                <option value="">2</option>
                            </select>
                        </div>
                    </div>
                    <div class="dcl-options-row flex f16">
                        <div class="label color_6">CSLX：</div>
                        <div class="dcl-radio-group flex-wid">
                            <div class="align-center">
                                <input type="checkbox">
                                <label>E</label>
                            </div>
                            <div class="align-center">
                                <input type="checkbox">
                                <label>C</label>
                            </div>
                            <div class="align-center">
                                <input type="checkbox">
                                <label>W</label>
                            </div>
                        </div>
                    </div>
                    <div class="dcl-options-row flex f16">
                        <div class="label color_6">TMLS：</div>
                        <div class="dcl-radio-group flex-wid">
                            <div class="align-center">
                                <input type="radio">
                                <label>50</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>100</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>200</label>
                            </div>
                            <div class="align-center">
                                <input type="radio">
                                <label>400</label>
                            </div>
                        </div>
                    </div>

                    <button class="dcl-start">开始测试</button>
                </div>
            </div>
        </section>

        <!-- 预留模块 -->
        <section class="content flex-wid" data-main="6">
            <div class="flex-column" style="height: 100%;">
                <div class="title">词汇量测试</div>
                <div class="search">针对词汇量进行测试，来检测您掌握的词汇量情况</div>
                <div class="flex-hei align-center justify-center">
                    <img src="../../assets/images/happly-study.gif" alt="" class="happly-study">
                </div>
                <button class="vocabulary-test-start">开始测试</button>
            </div>
        </section>

        <!-- 记忆曲线 -->
        <section class="content flex-wid" data-main="7">
            <div class="flex-column" style="height: 100%;">
                <div class="title">记忆曲线</div>
                <div class="search">智能复习以德国心理学家赫尔曼·艾宾浩斯(Hermann Ebbinghaus)的遗忘曲线为理论基础，辅助记忆。</div>
                <div class="flex-hei align-center justify-center">
                    <img src="../../assets/images/ebbing.png" alt="记忆曲线" class="ebbing-img">
                </div>
                <div class="ebbing-tips f16">
                    <span>你约有</span>
                    <span class="f24 color_576f f_weight">0</span>
                    <span>个单词需要复习</span>
                </div>
                <button class="vocabulary-test-start">开始复习</button>
            </div>
        </section>
    </main>

    <!-- 选课中心 -->
    <main class="mask choise-mask">
        <section class="choise">
            <header class="title f16 justify-center align-center">选课中心</header>
            <div class="input-row align-center">
                <input class="choise-input flex-wid f14" placeholder="请输入你想要选择的内容" type="text" />
                <button class="choise-btn">找课程</button>
            </div>
            <div class="choise-menu flex-wrap">
                <div class="choise-menu-item f14 choise-menu-active">全部分类</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
                <div class="choise-menu-item f14">入门基础训练</div>
            </div>
            <div class="flex">
                <div class="column flex-column">
                    <div class="title f16">教材版本</div>
                    <div class="column-wrap flex-hei">
                        <div class="column-row column-active f14">人机对话发音规则</div>
                        <div class="column-row f14">中考词汇突击</div>
                        <div class="column-row f14">新概念优化</div>
                        <div class="column-row f14">奥赛小学英语</div>
                        <div class="column-row f14">空乘英语</div>
                        <div class="column-row f14">小升初分类词汇</div>
                        <div class="column-row f14">英语四级基础词汇（CET-4）</div>
                        <div class="column-row f14">高考词汇突击</div>
                        <div class="column-row f14">行知英语语音过关</div>
                        <div class="column-row f14">人机对话发音规则</div>
                        <div class="column-row f14">人机对话发音规则</div>
                        <div class="column-row f14">人机对话发音规则</div>
                        <div class="column-row f14">人机对话发音规则</div>
                    </div>
                </div>

                <div class="column-menu flex-wid flex-column">
                    <div class="flex column-value flex-hei flex-wrap">
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（上册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（中册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（下册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（上册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（上册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（上册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                        <div class="column-box">
                            <div class="value f14">人机对话发音规则（上册）</div>
                            <button class="column-btn justify-center align-center">订阅课程</button>
                        </div>
                    </div>
                    <div class="f14 label">此教材本本共 <span>3</span> 本课程</div>
                </div>
            </div>
        </section>
    </main>

    <!-- 单词复习 -->
    <main class="mask review-mask">
        <section class="review-container flex-column">
            <header class="title f16 justify-center align-center">智能复习</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="flex-wid f20">单词复习中</div>
                <div class="f16">测试录音前准备</div>
                <div class="l-switch" data-checked="false">
                    <div class="switch-circle"></div>
                </div>
                <img class="icon review-music" src="../../assets/images/icon/music.png" alt="icon" />
                <div class="iconfont lltuichu"></div>
            </div>

            <!-- 单词复习-暂无复习内容 -->
            <div class="review-wrap flex-hei" data-key="-2">
                <div style="width:100%;height:100%;" class="flex-column">
                    <div class="flex-hei flex-column align-center" style="width: 100%;">
                        <div class="start-card justify-center align-center">目前暂时没有单词需要</div>
                        <button class="start-btn review-change" data-key="1">退出</button>
                    </div>
                    <div class="review-footer align-center">
                        <span class="color_7b6c">当前测评级别：单词（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">） 短语（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">）</span>
                    </div>
                </div>
            </div>
            <!-- 单词复习-强制复习 -->
            <div class="review-wrap flex-hei" data-key="-1">
                <div style="width:100%;height:100%;" class="flex-column">
                    <div class="flex-hei flex-column align-center" style="width: 100%;">
                        <div class="start-card flex-column align-center justify-center">
                            <div class="align-end justify-center before-dot f30">
                                <span>目前有 </span>
                                <span class="color_576f f_weight f40">15</span>
                                <span>个单词需要进行复习</span>
                            </div>
                            <div class="color_71c4 f12 justify-center">（系统轻强制复习中）</div>
                            <div class="label-force f12 color_878c">注：根据设置，每次最多复习50个单词</div>
                        </div>
                        <button class="start-btn review-change" data-key="1">开始学习</button>
                    </div>
                    <div class="review-footer align-center">
                        <span class="color_7b6c">当前测评级别：单词（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">） 短语（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">）</span>
                    </div>
                </div>
            </div>

            <!-- 单词复习-开始 -->
            <div class="review-wrap flex-hei" data-key="0">
                <div class="start-card justify-center align-center">即将开始本单元学习，Let's go!</div>
                <button class="start-btn review-change" data-key="1">开始学习</button>
            </div>
            <!-- 单词复习-显示复习单词 -->
            <div class="review-wrap flex-hei review-success" data-key="1">
                <div style="width:100%;height:100%;" class="flex-column">
                    <div class="flex-hei flex-column justify-center align-center" style="width: 100%;">
                        <div>
                            <span class="color_576f f30 f_weight review-value-start">chat</span>
                            <span class="color_5f65">分音节：</span>
                            <span class="color_576f f30 f_weight">chat</span>
                        </div>
                        <div class="align-center review-articulate">
                            <span class="color_878c f16">英[tʃæt]</span>
                            <img class="play-icon play-icon-left" src="../../assets/images/icon/play-icon.png" alt="">
                            <span class="color_878c f16">美[tʃæt]</span>
                            <img class="play-icon" src="../../assets/images/icon/play-icon.png" alt="">
                        </div>
                        <div class="align-center">
                            <span class="f16 color_878c">中文诠释：</span>
                            <span class="f20 color_3">VI. 聊天，闲谈</span>
                        </div>
                        <div class="align-center review-star star-animation">
                            <span class="iconfont lla-duobianxing1"></span>
                            <span class="iconfont llstar"></span>
                            <span class="iconfont llstar"></span>
                            <span class="iconfont llstar"></span>
                            <span class="iconfont llstar"></span>
                            <img class="reivew-success-icon review-success-show"
                                src="../../assets/images/icon/review-success.png" alt="">
                        </div>

                        <!-- 复习时展示 -->
                        <div class="f12 color_9 review-ing-show">听听你和高考主播有多近</div>
                        <div class="f20 tips review-ing-show">快读两遍说中文</div>

                        <!-- 录音中展示 -->
                        <div class="f12 color_9 review-recording-show">听听你和高考主播有多近</div>
                        <div class="f20 tips review-recording-show">快读两遍说中文</div>

                        <!-- 复习成功展示 -->
                        <div class="f30 color_71c4 review-success-show">chat:100</div>
                        <div class="f20 tips color_e8a8 review-success-show">100分，完美的你配得上这个分数</div>

                        <div class="align-end review-action">
                            <div class="item">
                                <div class="iconfont lllaba"></div>
                                <div class="color_7b6c">听原音</div>
                            </div>
                            <div class="item review-ing-show">
                                <div class="iconfont llluyinceping" onclick="handleChangeReview('review-recording')">
                                </div>
                                <div class="color_7b6c">录音测评</div>
                            </div>
                            <div class="item review-recording-show">
                                <div class="progress-container" onclick="handleChangeReview('review-success')">
                                    <svg class="progress-circle" viewBox="0 0 120 120">
                                        <circle class="progress-bg" cx="60" cy="60" r="54"></circle>
                                        <circle class="progress-fill" cx="60" cy="60" r="54"></circle>
                                    </svg>
                                    <div class="progress-value iconfont llluyinceping color_576f"></div>
                                </div>

                                <div class="color_7b6c">录音测评</div>
                            </div>
                            <div class="item review-success-show">
                                <div class="iconfont llluyinceping2"></div>
                                <div class="color_7b6c">录音测评</div>
                            </div>
                            <div class="item">
                                <div class="iconfont lla-zu269"></div>
                                <div class="color_7b6c">听自己</div>
                            </div>
                            <div class="item review-change review-success-show" data-key="2">
                                <div class="iconfont llxiayige"></div>
                                <div class="color_7b6c">下一个</div>
                            </div>

                            <div class="item recording-card review-recording-show flex-column">
                                <div class="align-center">
                                    <div>录音中...</div>
                                    <div class="recording-stop">停止录音</div>
                                </div>
                                <div class="color_71c4">快捷键：空格键</div>
                            </div>
                        </div>
                    </div>
                    <div class="review-footer align-center">
                        <span class="color_7b6c">当前测评级别：单词（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">） 短语（</span>
                        <span class="color_576f">入门</span>
                        <span class="color_7b6c">）</span>

                        <span class="label-right color_7b6c">记忆时间： </span>
                        <span class="color_576f">00：00：05</span>
                        <span class="label color_7b6c">当前生词数：</span>
                        <span class="color_576f">5</span>
                        <span class="label color_7b6c">识别总次数：</span>
                        <span class="color_576f">5</span>
                    </div>
                </div>
            </div>

            <div class="review-wrap flex-hei" data-key="2">
                <div style="width: 100%;height: 100%;" class="justify-center">
                    <div class="reivew-card-box">
                        <div class="review-card">
                            <div class="review-card-row align-center">
                                <span>单词总数（个）：</span>
                                <span class="color_576f">30</span>
                            </div>
                            <div class="review-card-row align-center">
                                <span>未完总数（个）：</span>
                                <span class="color_576f">30</span>
                            </div>
                            <div class="review-card-row align-center">
                                <span>本次学习（个）：</span>
                                <span class="color_576f">0</span>
                            </div>
                        </div>
                        <div class="review-card">
                            <div class="review-card-row align-center">
                                <span>完成本单元可获得：</span>
                                <span class="color_576f">30</span>
                                <span class="iconfont lla-zu186 color_e8a8"></span>
                            </div>
                        </div>
                        <div class="review-card">
                            <div class="review-card-row align-center">
                                <span>当前战绩可获得：</span>
                                <span class="color_576f">30</span>
                                <span class="iconfont lla-zu186 color_e8a8"></span>
                            </div>
                        </div>
                        <div class="review-card">
                            <div class="review-card-row align-center">
                                继续学习可获得更多乐廊值
                            </div>
                        </div>
                    </div>
                    <div class="review-end-box align-end justify-center">
                        <button class="start-btn review-change" data-key="0"></button>
                        <button class="start-btn review-save"></button>
                    </div>
                </div>
            </div>

            <div class="prepare-mask justify-center align-center">
                <div class="circle justify-center align-center"></div>
            </div>
        </section>
    </main>

    <!-- 单词本弹窗 -->
    <main class="mask vocabulary-mask">
        <section class="vocabulary flex-column">
            <header class="title f16 justify-center align-center">单词本</header>
            <div class="vocabulary-search align-center color_6">
                <input class="radio" type="radio" value="0" checked="checked"></input>
                <span class="radio-value">字母顺序</span>
                <input class="radio" type="radio" value="1"></input>
                <span class="radio-value">熟悉程度</span>
                <span>每页单词书：</span>
                <select id="select_id">
                    <option value="10">10</option>
                    <option value="20">20</option>
                    <option value="30">30</option>
                    <option value="40">40</option>
                    <option value="50">50</option>
                </select>
                <div class="rest-btn">重新获取</div>
                <div class="tag bg-e8a8">生词</div>
                <div class="tag bg-90d5">夹生词</div>
                <div class="tag bg-a6d6">熟词</div>
            </div>
            <div class="vocabulary-wrap flex-hei">
                <div class="vocabulary-card-wrap">
                    <div class="vocabulary-card vocabulary-card-reverse f20">汉语翻译</div>
                    <div class="vocabulary-card">
                        <div class="label f30">chat</div>
                        <div class="tips f20">[tʃæt]</div>
                        <div class="iconfont lltingyuanyin f20"></div>
                    </div>
                </div>
                <div class="vocabulary-card-wrap">
                    <div class="vocabulary-card vocabulary-card-reverse f20">汉语翻译</div>
                    <div class="vocabulary-card">
                        <div class="label f30">chat</div>
                        <div class="tips f20">[tʃæt]</div>
                        <div class="iconfont lltingyuanyin f20"></div>
                    </div>
                </div>
                <div class="vocabulary-card-wrap">
                    <div class="vocabulary-card vocabulary-card-reverse f20">汉语翻译</div>
                    <div class="vocabulary-card">
                        <div class="label f30">chat</div>
                        <div class="tips f20">[tʃæt]</div>
                        <div class="iconfont lltingyuanyin f20"></div>
                    </div>
                </div>
            </div>
            <div class="paging justify-center align-center">

            </div>
        </section>
    </main>

    <!-- 测评分析 -->
    <section class="mask analyze-mask">
        <div class="exam-analyze">
            <header class="title f16 justify-center align-center">本次测评结果分析</header>
            <div class="analyze-value">
                <span>得分：</span>
                <span class="color_576f f_weight f20">80</span>
            </div>
            <div class="analyze-card flex-column">
                <div class="title">测评细节</div>
                <div class="pronounce-wrap align-center">
                    <div>你的发音</div>
                    <div class="align-center pronounce">
                        <span class="iconfont lla-zu2629 f20 audio-play"></span>
                        <span class="time f12">0:00/0:03</span>
                        <div class="pronounce-box flex-wid">
                            <div class="pronounce-value"></div>
                        </div>
                        <span class="iconfont lllaba f20"></span>
                    </div>
                </div>
                <div class="exam-analyze-content scroll-y flex-hei grid-column-3">
                    <div>
                        <div class="analyze-row f16 f_weight">
                            <div class="color_576f row-line row-line-success">chat</div>
                            <div class="color_576f">100</div>
                        </div>
                        <div class="justify-center align-center exam-tips">
                            <span>音标</span>
                            <span class="iconfont lla-zu1152 f22"></span>
                            <span>分析</span>
                        </div>
                        <div class="justify-center align-center">
                            <div class="analyze-row f16 f_weight" data-key="0">
                                <div class="color_576f row-line row-line-success">c</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="1">
                                <div class="color_576f row-line row-line-success">h</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="2">
                                <div class="color_576f row-line row-line-success">a</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="3">
                                <div class="color_576f row-line row-line-success">t</div>
                                <div class="color_576f">100</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="analyze-row f16 f_weight">
                            <div class="color_576f row-line row-line-success">chat</div>
                            <div class="color_576f">100</div>
                        </div>
                        <div class="justify-center align-center exam-tips">
                            <span>音标</span>
                            <span class="iconfont lla-zu1152 f22"></span>
                            <span>分析</span>
                        </div>
                        <div class="justify-center align-center">
                            <div class="analyze-row f16 f_weight" data-key="0">
                                <div class="color_576f row-line row-line-success">c</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="1">
                                <div class="color_576f row-line row-line-success">h</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="2">
                                <div class="color_576f row-line row-line-success">a</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="3">
                                <div class="color_576f row-line row-line-success">t</div>
                                <div class="color_576f">100</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="analyze-row f16 f_weight">
                            <div class="color_576f row-line row-line-success">chat</div>
                            <div class="color_576f">100</div>
                        </div>
                        <div class="justify-center align-center exam-tips">
                            <span>音标</span>
                            <span class="iconfont lla-zu1152 f22"></span>
                            <span>分析</span>
                        </div>
                        <div class="justify-center align-center">
                            <div class="analyze-row f16 f_weight" data-key="0">
                                <div class="color_576f row-line row-line-success">c</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="1">
                                <div class="color_576f row-line row-line-success">h</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="2">
                                <div class="color_576f row-line row-line-success">a</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="3">
                                <div class="color_576f row-line row-line-success">t</div>
                                <div class="color_576f">100</div>
                            </div>
                        </div>
                    </div>
                    <div>
                        <div class="analyze-row f16 f_weight">
                            <div class="color_576f row-line row-line-success">chat</div>
                            <div class="color_576f">100</div>
                        </div>
                        <div class="justify-center align-center exam-tips">
                            <span>音标</span>
                            <span class="iconfont lla-zu1152 f22"></span>
                            <span>分析</span>
                        </div>
                        <div class="justify-center align-center">
                            <div class="analyze-row f16 f_weight" data-key="0">
                                <div class="color_576f row-line row-line-success">c</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="1">
                                <div class="color_576f row-line row-line-success">h</div>
                                <div class="color_576f">100</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="2">
                                <div class="color_71c4 row-line row-line-col">a</div>
                                <div class="color_71c4">70</div>
                            </div>
                            <div class="analyze-row f16 f_weight" data-key="3">
                                <div class="color_e8a8 row-line row-line-err">t</div>
                                <div class="color_e8a8">20</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="analyze-card">
                <div class="title">测评环境</div>
                <div class="exam-analyze-content">
                    <div class="item">
                        <div class="label">录音检测：正常</div>
                        <div class="label">信嗓比检测：26dB(值越高越清晰，范围：0~40dB)</div>
                        <div class="label">音量检测：102dB(范围：0~180dB)</div>
                        <div class="label">浏览器：Chrome Version 86</div>
                        <div class="label">操作系统：Windows 10</div>
                    </div>
                    <div class="item">
                        <div class="label">录音检测：正常</div>
                        <div class="label">信嗓比检测：26dB(值越高越清晰，范围：0~40dB)</div>
                        <div class="label">音量检测：102dB(范围：0~180dB)</div>
                        <div class="label">浏览器：Chrome Version 86</div>
                        <div class="label">操作系统：Windows 10</div>
                    </div>
                </div>
            </div>

            <button class="analyze-submit exam-close">关闭窗口</button>
        </div>
    </section>

    <!-- 顺序拼写 first -->
    <section class="mask sequence-mask-first">
        <section class="sequence flex-column">
            <header class="title f16 justify-center align-center">智能复习</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="flex-wid f20">自然拼读入门课（升级版）— Unit 1</div>
                <div class="f16">测试录音前准备</div>
                <div class="l-switch" data-checked="false">
                    <div class="switch-circle"></div>
                </div>
                <img class="icon review-music" src="../../assets/images/icon/music.png" alt="icon" />
                <div class="iconfont lltuichu f20 color_6"></div>
            </div>
            <div class="sequence-header-line">
                <div class="value"></div>
            </div>

            <div class="flex-hei">
                <div class="menu-title f20">听写单词</div>

                <!-- 词义隐藏 -->
                <div class="align-center justify-center word-hidden">
                    <div class="btn f16">词义隐藏</div>
                    <div class="f20">VI.聊天，闲谈</div>
                </div>

                <div class="justify-center">
                    <span class="iconfont lla-zu1177 color_576f f30"></span>
                    <div class="search-wrap">
                        <input type="text" class="search f18">
                        <div class="tips">
                            <span class="f24 color_576f f_weight">gap</span>
                            <span class="f20">VI.聊天,闲谈</span>
                        </div>
                        <div class="tips">
                            <span class="f24 color_fd5f f_weight">gap</span>
                            <span class="f20">VI.聊天,闲谈</span>
                        </div>
                    </div>
                    <button class="search-btn">下一个</button>
                    <span class="iconfont llzhengque2 f40 color_576f"></span>
                    <span class="iconfont llcuowu f40 color_e8a8"></span>
                </div>

                <img class="sequence-success" src="../../assets/images/sequence-success.jpg" alt="">
            </div>

            <div class="review-footer align-center">
                <span class="color_7b6c">当前测评级别：单词（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">） 短语（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">）</span>

                <span class="label-right color_7b6c">记忆时间： </span>
                <span class="color_576f">00：00：05</span>
                <span class="label color_7b6c">当前生词数：</span>
                <span class="color_576f">5</span>
                <span class="label color_7b6c">识别总次数：</span>
                <span class="color_576f">5</span>
            </div>

            <!-- 播报 -->
            <div class="broadcast">
                <div class="label">佳绩</div>
                <div class="label">二胜 x <span class="color_576f">3</span></div>
                <div class="label">三胜 x <span class="color_576f">3</span></div>
                <div class="label">四胜 x <span class="color_576f">3</span></div>
                <div class="label">五胜 x <span class="color_576f">3</span></div>
                <div class="label">全胜 x <span class="color_576f">3</span></div>
                <div class="close color_576f">关闭播报</div>
                <div class="cancel">收起面板</div>
            </div>
        </section>
    </section>

    <!-- 拼写强化 -->
    <section class="mask intensify-mask">
        <section class="intensify flex-column">
            <header class="title f16 justify-center align-center">智能复习</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="flex-wid f20">自然拼读入门课（升级版）— Unit 1</div>
                <div class="f16">测试录音前准备</div>
                <div class="l-switch" data-checked="false">
                    <div class="switch-circle"></div>
                </div>
                <img class="icon review-music" src="../../assets/images/icon/music.png" alt="icon" />
                <div class="iconfont lltuichu f20 color_6"></div>
            </div>
            <div class="header-line"></div>

            <div class="flex-hei">
                <div class="start-card flex-column align-center justify-center">
                    <div class="align-end justify-center before-dot f30">
                        <span>回忆刚学的单词，接下来进入</span>
                        <span class="color_576f f_weight f40">拼写强化</span>
                        <span>阶段</span>
                    </div>
                    <div class="color_71c4 f12 justify-center tips">（提示：要用："落指如飞”的速度听写哦！！！）</div>
                </div>
                <div class="justify-center">
                    <div class="btn">顺序拼写</div>
                    <div class="btn btn-inverse">逆序拼写</div>
                </div>
            </div>

            <div class="review-footer align-center">
                <span class="color_7b6c">当前测评级别：单词（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">） 短语（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">）</span>
            </div>
        </section>
    </section>

    <!-- 竞赛弹窗 -->
    <section class="mask competition-mask">
        <div class="competition flex-column">
            <header class="title f16 justify-center align-center">对比测试</header>
            <div class="tips">所谓对比，学前选择什么单元，学后就对比什么单元,步骤提示：（1.点击选择测试单元 -> 2.开始测试。）</div>
            <div class="competition-vs-wrap justify-center align-end">
                <div class="item">
                    <div class="value f50 color_71c4">?</div>
                    <div class="f20 color_6">学前</div>
                </div>
                <div class="item">
                    <div class="value color_e8a8 f50">vs</div>
                    <div class="f20 color_6">vs</div>
                </div>
                <div class="item">
                    <div class="value f50 color_71c4">?</div>
                    <div class="f20 color_6">学后</div>
                </div>
            </div>
            <div class="flex-hei">
                <div class="competition-wrap">
                    <div class="competition-card competition-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont">测</span>
                    </div>
                    <div class="competition-card competition-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont">测</span>
                    </div>
                    <div class="competition-card competition-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont">测</span>
                    </div>
                    <div class="competition-card competition-success align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont">测</span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                    <div class="competition-card align-center">
                        <img class="icon" src="../../assets/images/icon/subscription-icon.png" alt="">
                        <span class="line-clamp-2 f18 color_f">Until 1</span>
                        <span class="iconfont lla-zu1334"></span>
                    </div>
                </div>
            </div>
            <div class="competition-footer justify-center align-center">
                <button class="competition-btn">学前测试</button>
                <button class="competition-btn">学后测试</button>
                <button class="competition-btn competition-close">关闭页面</button>
            </div>
        </div>
    </section>

    <!-- DCL-T同步测试 -->
    <section class="mask dcl-mask">
        <div class="dcl flex-column">
            <header class="title f16 justify-center align-center">DCL-T同步测试</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="f20">词汇量测试</div>
                <div class="f13 color_6">（题量：100道）</div>
            </div>
            <div class="dcl-wrap flex-hei">
                <div class="align-center">
                    <div class="iconfont llzhengque dcl-total-success color_71c4 f20 f_weight">20</div>
                    <div class="iconfont llcuowu dcl-total-fail color_e8a8 f20 f_weight">20</div>
                    <div class="justify-end flex-wid f26 color_6772">
                        <span>09</span>
                        <span>：</span>
                        <span>09</span>
                        <span>：</span>
                        <span>30</span>
                    </div>
                </div>
                <div class="dcl-slider-wrap">
                    <div class="dcl-slider" style="width: 50%;"></div>
                </div>
                <div class="dcl-word-now justify-center align-end f15">
                    <span>当前第</span>
                    <span class="color_576f f24">41</span>
                    <span>个单词</span>
                </div>
                <div class="dcl-word-value f30 f_weight">chat</div>

                <div class="dcl-word-row dcl-word-active">A 治疗</div>
                <div class="dcl-word-row dcl-word-success">B 闲谈，聊天</div>
                <div class="dcl-word-row dcl-word-fail">C 确信的</div>
                <div class="dcl-word-row">D 有活力</div>
                <div class="dcl-word-row">E 有活力</div>
                <div class="dcl-tips color_576f f12">请点击本单词正确意义栏</div>
            </div>
            <div class="dcl-footer justify-center">
                <div class="dcl-btn">提前交卷</div>
                <div class="dcl-btn">退出测试</div>
            </div>
        </div>
    </section>

    <!-- 同步测试结果 -->
    <section class="mask dcl-result-mask">
        <div class="dcl-reslut">
            <header class="title f16 justify-center align-center">DCL-T同步测试</header>
            <div class="align-center review-header justify-center">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="f20">词汇量测试</div>
                <div class="f13 color_6">（题量：100道）</div>
            </div>
            <div class="justify-center align-end dcl-reslut-option">
                <div class="flex color_878c f12 align-end">
                    <span>答对：</span>
                    <span class="color_576f f20">100</span>
                    <span>题</span>
                </div>
                <div class="flex color_878c f12 align-end">
                    <span>答错：</span>
                    <span class="color_e8a8 f20">100</span>
                    <span>题</span>
                </div>
                <div class="flex color_878c f12 align-end">
                    <span>用时：</span>
                    <span class="color_3 f20">2分钟50秒</span>
                </div>
            </div>
            <div class="dcl-reslut-value justify-center align-center color_a9ba">100</div>
            <div class="dcl-reslt-tips">
                <div class="color_6772 f12">低分阶段（60分以下）</div>
                <div class="color_3 f16">三十天快速提分，单科赶超中等生。</div>
            </div>
            <div class="justify-center color_6772 f20 dcl-reslut-label">
                <span>您已掌握本学段单词量的</span>
                <span class="color_576f">50%</span>
            </div>
            <div class="justify-center color_6772 f20 dcl-reslut-label">
                <span>您还有</span>
                <span class="color_576f">50%</span>
                <span>没有掌握哦，继续努力吧！</span>
            </div>
            <div class="justify-center color_6772 f20 dcl-reslut-label">
                <span>您已掌握本学段单词量的</span>
                <span class="color_576f">50%</span>
            </div>
            <div class="justify-center color_6772 f20 dcl-reslut-label">
                <span>获得</span>
                <span class="color_576f">2</span>
                <span>个乐廊币，全国排名：</span>
                <span class="color_576f">32128</span>
                <span>名</span>
            </div>
            <div class="dcl-footer dcl-reslut-footer justify-center">
                <div class="dcl-btn">学习报告</div>
                <div class="dcl-btn">退出测试</div>
            </div>
        </div>
    </section>

    <section class="mask dcl-none-mask">
        <div class="dcl flex-column">
            <header class="title f16 justify-center align-center">DCL-T同步测试</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="f20">词汇量测试</div>
                <div class="f13 color_6">（题量：100道）</div>
            </div>
            <div class="dcl-wrap flex-hei">
                <div class="align-center">
                    <div class="iconfont llzhengque dcl-total-success color_71c4 f20 f_weight">20</div>
                    <div class="iconfont llcuowu dcl-total-fail color_e8a8 f20 f_weight">20</div>
                    <div class="justify-end flex-wid f26 color_6772">
                        <span>09</span>
                        <span>：</span>
                        <span>09</span>
                        <span>：</span>
                        <span>30</span>
                    </div>
                </div>
                <div class="dcl-slider-wrap">
                    <div class="dcl-slider" style="width: 50%;"></div>
                </div>
                <div class="dcl-word-now justify-center align-end f15">
                    <span>当前第</span>
                    <span class="color_576f f24">41</span>
                    <span>个单词</span>
                </div>
                <div class="align-center dcl-none-word">
                    <div class="dcl-none-btn">隐藏词义</div>
                    <div class="color_e8a8 f16">聊天</div>
                </div>
                <div class="align-center dcl-none-row">
                    <div class="iconfont color_576f f30 lllaba"></div>
                    <input type="text" placeholder="请输入正确单词" class="flex-wid f18">
                    <div class="btn f18">确认</div>
                </div>
            </div>
            <div class="align-center justify-center color_576f f15 dcl-none-tips">
                <span>请拼写出正确单词，按</span>
                <div class="iconfont lllaba"></div>
                <span>可重复听读，快捷键Ctrl + Z</span>
            </div>
            <div class="dcl-footer justify-center">
                <div class="dcl-btn">提前交卷</div>
                <div class="dcl-btn">退出测试</div>
            </div>
        </div>
    </section>

    <!-- DCL-T同步测试结果分析 -->
    <section class="mask dcl-analyze-mask">
        <div class="dcl flex-column">
            <header class="title f16 justify-center align-center">DCL-T同步测试</header>
            <div class="dcl-analyze flex-hei">
                <div class="analyze-title">学员信息</div>
                <div class="align-center user">
                    <img src="../../assets/images/avatar.png" alt="" class="avatar">
                    <div>
                        <div class="align-center">
                            <span class="iconfont lluser color_576f f24"></span>
                            <span class="f16">账户：HKY061107</span>
                        </div>
                        <div class="align-center">
                            <span class="iconfont llyanchurili color_576f f24"></span>
                            <span class="f16">测试时间：2023-07-15 22:00:00</span>
                        </div>
                    </div>
                </div>
                <div class="analyze-title">测试信息</div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">测试类型</div>
                    <div class="analyze-value color_6">小升初分类词汇（50道）</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">得分</div>
                    <div class="analyze-value color_6">60</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">答对</div>
                    <div class="analyze-value color_6">3题</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">答错</div>
                    <div class="analyze-value color_6">47题</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">用时</div>
                    <div class="analyze-value color_6">1分43秒</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">获得武力值数</div>
                    <div class="analyze-value color_6">1个</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">全国排名</div>
                    <div class="analyze-value color_6">99名</div>
                </div>
                <div class="analyze-row align-center f15">
                    <div class="analyze-label f_weight">学段掌握</div>
                    <div class="analyze-value color_6">10%</div>
                </div>

                <div class="analyze-tips color_6">
                    <div class="analyze-tips-top">单词量同步测试结果说明</div>
                    这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示。
                    这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示。
                    这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示这是一段很长的同步测试结果提示。
                    ......
                    <div class="analyze-tips-bottom">查看单词学习指导方案</div>
                </div>
            </div>
            <div class="dcl-footer justify-center">
                <div class="dcl-btn">退出测试</div>
            </div>
        </div>
    </section>

    <!-- 同步测试结果-参考提示 -->
    <section class="mask dcl-refer-mask">
        <div class="dcl-reslut">
            <header class="title f16 justify-center align-center">DCL-T同步测试</header>
            <div class="align-center review-header justify-center">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="f20">词汇量测试</div>
                <div class="f13 color_6">（题量：100道）</div>
            </div>
            <div class="justify-center align-end dcl-reslut-option">
                <div class="flex color_878c f12 align-end">
                    <span>答对：</span>
                    <span class="color_576f f20">100</span>
                    <span>题</span>
                </div>
                <div class="flex color_878c f12 align-end">
                    <span>答错：</span>
                    <span class="color_e8a8 f20">100</span>
                    <span>题</span>
                </div>
                <div class="flex color_878c f12 align-end">
                    <span>用时：</span>
                    <span class="color_3 f20">2分钟50秒</span>
                </div>
            </div>
            <div class="dcl-refer-label justify-center align-end f20 color_3">
                <span>您的词汇量测试成绩是</span>
                <span class="color_576f f26 f_weight">4588分</span>
            </div>
            <div class="dcl-refer-label justify-center align-end f20 color_3">
                当发现英语专业的学生词汇量逊色于某些非英语
            </div>
            <div class="dcl-refer-label justify-center align-end f20 color_3">
                专业的学生时，无需惊讶
            </div>
            <div class="dcl-refer-btnRow justify-center">
                <div class="dcl-none-btn">退出测试</div>
            </div>
            <div class="dcl-refer">
                <div class="dcl-refer-tips f20 f_weight color_e8a8">常见的考试词汇要求（仅供参考）</div>
                <div class="dcl-refer-wrapper">
                    <div class="align-center">
                        <div class="dcl-refer-item">中考</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">高考</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">CET-4</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">CET-6/考研</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">CET-4</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">CET-4</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">CET-4</div>
                        <div class="dcl-refer-value">1500~1600</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">IELTS/TOFEL</div>
                        <div class="dcl-refer-value">9000~16000</div>
                    </div>
                    <div class="align-center">
                        <div class="dcl-refer-item">TEMA8</div>
                        <div class="dcl-refer-value">15600</div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- 进入网站默认弹窗 -->
    <section class="mask default-mask">
        <div class="dcl flex-column">
            <div class="iconfont lltuichu f30 color_6"></div>
            <div class="default-header align-center">
                <img class="avatar" src="../../assets/images/avatar.png" alt="头像" />
                <div>
                    <div class="f_weight username f18">HKY0001</div>
                    <div class="color_576f">列兵</div>
                </div>
                <div class="default-count">
                    <div class="color_576f f20 f_weight">8 天</div>
                    <div class=" color_6">累计坚持</div>
                </div>
                <div class="default-count">
                    <div class="color_71c4 f20 f_weight">8 词</div>
                    <div class=" color_6">累计学习</div>
                </div>
                <div class="default-count">
                    <div class="color_e8a8 f20 f_weight">8 词</div>
                    <div class=" color_6">今日掌握</div>
                </div>
                <div class="flex-wid">
                    <div class="align-center f18">
                        <span class="color_e8a8">武力值：</span>
                        <span class="color_576f f_weight f20">100</span>
                    </div>
                    <div class="default-header-btn f15">领取今日登录奖励</div>
                </div>
            </div>
            <div class="default-tips iconfont lllaba align-center f16">
                <span>每日登录送</span>
                <span>10</span>
                <span>个武力值</span>
            </div>
            <div class="flex-hei flex-column default-hide">
                <img class="default-no-more" src="../../assets/images/dcl-result.png" />
                <div class="justify-center color_9">~ 暂无任务，快去订阅课程学习吧 ~</div>
                <div class="dcl-footer flex-hei justify-end flex-column align-center">
                    <div class="dcl-btn">关闭弹窗</div>
                </div>
            </div>
            <div class="flex-hei default-swiper">
                <div class="swiper-tips color_576f">作战任务1/2</div>
                <div class="carousel-btn">
                    <div class="carousel-prev iconfont lla-zu820"></div>
                </div>
                <div class="carousel-container">
                    <div class="carousel">
                        <div class="carousel-item flex-column">
                            <div class="carousel-header justify-between">
                                <span>低年级奥赛</span>
                                <span>学习进度 60%</span>
                            </div>
                            <div class="justify-center flex-hei align-center">
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-btn">开始学习</div>
                        </div>
                        <div class="carousel-item flex-column">
                            <div class="carousel-header justify-between">
                                <span>低年级奥赛2</span>
                                <span>学习进度 50%</span>
                            </div>
                            <div class="justify-center flex-hei align-center">
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                                <div class="carousel_cirlce-wrapper">
                                    <div class="carousel_cirlce flex-column justify-center align-center">
                                        <div class="color_576f">
                                            <span class="f28">100</span>
                                            <span>个</span>
                                        </div>
                                        <div class="color_9">单词总数</div>
                                    </div>
                                </div>
                            </div>
                            <div class="swiper-btn">开始学习</div>
                        </div>
                    </div>
                </div>
                <div class="carousel-btn">
                    <div class="carousel-next iconfont lla-zu820"></div>
                </div>

            </div>
    </section>

    <!-- 例句强化 -->
    <section class="mask sentence-mask template">
        <section class="sequence flex-column">
            <header class="title f16 justify-center align-center">例句强化</header>
            <div class="align-center review-header">
                <img class="icon" src="../../assets/images/icon/review-book.png" alt="icon" />
                <div class="flex-wid f20">自然拼读入门课（升级版）— Unit 1</div>
                <div class="f16">测试录音前准备</div>
                <div class="l-switch" data-checked="false">
                    <div class="switch-circle"></div>
                </div>
                <img class="icon review-music" src="../../assets/images/icon/music.png" alt="icon" />
                <div class="iconfont lltuichu f20 color_6"></div>
            </div>
            <div class="sequence-header-line">
                <div class="value"></div>
            </div>

            <div class="flex-hei">
                <div class="justify-center sentence-word sentence-row">
                    <span class="color_576f f30 f_weight review-value-start">chat</span>
                    <span class="color_5f65">分音节：</span>
                    <span class="color_576f f30 f_weight">chat</span>
                </div>
                <div class="align-center review-articulate justify-center sentence-row">
                    <span class="color_878c f16">英[tʃæt]</span>
                    <img class="play-icon play-icon-left" src="../../assets/images/icon/play-icon.png" alt="">
                    <span class="color_878c f16">美[tʃæt]</span>
                    <img class="play-icon" src="../../assets/images/icon/play-icon.png" alt="">
                </div>
                <div class="align-center justify-center sentence-row">
                    <span class="f16 color_878c">中文诠释：</span>
                    <span class="f18 color_3">VI. 聊天，闲谈</span>
                </div>
                <div class="sentence-card">
                    <div class="sentence-value-title">测评例句</div>
                    <div class="sentence-value">On the way to the station,he chatted about their trip.</div>
                    <div class="sentence-translate color_878c">中文诠释：在去火车站的路上，林丹你聊起了他们的旅程</div>
                    <div class="pronounce-wrap align-center justify-center">
                        <div>你的发音</div>
                        <div class="align-center pronounce">
                            <span class="iconfont lla-zu2629 f20 audio-play"></span>
                            <span class="time f12">0:00/0:03</span>
                            <div class="pronounce-box flex-wid">
                                <div class="pronounce-value"></div>
                            </div>
                            <span class="iconfont lllaba f20"></span>
                        </div>
                    </div>
                </div>

                <div class="align-center review-star justify-center">
                    <span class="iconfont lla-duobianxing1"></span>
                    <span class="iconfont llstar"></span>
                    <span class="iconfont llstar"></span>
                    <span class="iconfont llstar"></span>
                    <span class="iconfont llstar"></span>
                    <img class="reivew-success-icon" src="../../assets/images/icon/review-success.png" alt="">
                </div>

                <div class="sentence-grade align-end justify-center">
                    <img class="sentence-grade-icon" src="../../assets/images/icon/review-success.png" alt="">
                    <span class="color_878c">完整度：</span>
                    <span class="color_576f f_weight f21">100</span>

                    <img class="sentence-grade-icon" src="../../assets/images/icon/review-success.png" alt="">
                    <span class="color_878c">准确度：</span>
                    <span class="color_576f f_weight f21">100</span>

                    <img class="sentence-grade-icon" src="../../assets/images/icon/review-success.png" alt="">
                    <span class="color_878c">流利度：</span>
                    <span class="color_71c4 f_weight f21">63</span>

                    <img class="sentence-grade-icon" src="../../assets/images/icon/review-success.png" alt="">
                    <span class="color_878c">韵律度：</span>
                    <span class="color_e8a8 f_weight f21">48</span>

                    <img class="sentence-grade-icon" src="../../assets/images/icon/review-success.png" alt="">
                    <span class="color_878c">感情度：</span>
                    <span class="color_e8a8 f_weight f21">42</span>
                </div>

                <div class="align-end review-action justify-center">
                    <div class="item">
                        <div class="iconfont lllaba"></div>
                        <div class="color_7b6c">听原音</div>
                    </div>
                    <div class="item">
                        <div class="iconfont llluyinceping">
                        </div>
                        <div class="color_7b6c">录音测评</div>
                    </div>
                    <div class="item">
                        <img class="icon-recording" src="../../assets/images/icon/icon-recording.png" alt="">
                        <div class="color_7b6c">录音测评</div>
                    </div>
                    <div class="item review-success-show">
                        <div class="iconfont llluyinceping2"></div>
                        <div class="color_7b6c">录音测评</div>
                    </div>
                    <div class="item">
                        <div class="iconfont lla-zu269"></div>
                        <div class="color_7b6c">听自己</div>
                    </div>
                    <div class="item review-change">
                        <div class="iconfont llxiayige"></div>
                        <div class="color_7b6c">下一个</div>
                    </div>

                    <!-- <div class="item recording-card flex-column">
                        <div class="align-center">
                            <div>录音中...</div>
                            <div class="recording-stop">停止录音</div>
                        </div>
                        <div class="color_71c4">快捷键：空格键</div>
                    </div> -->
                </div>
            </div>

            <div class="review-footer align-center">
                <span class="color_7b6c">当前测评级别：单词（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">） 短语（</span>
                <span class="color_576f">入门</span>
                <span class="color_7b6c">）</span>
            </div>

            <!-- 播报 -->
            <div class="broadcast">
                <div class="label">佳绩</div>
                <div class="label">二胜 x <span class="color_576f">3</span></div>
                <div class="label">三胜 x <span class="color_576f">3</span></div>
                <div class="label">四胜 x <span class="color_576f">3</span></div>
                <div class="label">五胜 x <span class="color_576f">3</span></div>
                <div class="label">全胜 x <span class="color_576f">3</span></div>
                <div class="close color_576f">关闭播报</div>
                <div class="cancel">收起面板</div>
            </div>

            <!-- 倒计时 -->
            <div class="sentence-timer color_576f f32">00：01：00</div>
        </section>
    </section>

    <!-- 自主测试 -->
    <section class="mask autonomously-mask">
        <div class="dcl flex-column">
            <div class="close-mask-icon iconfont llclose"></div>
            <header class="title f16 justify-center align-center">自主测试</header>
            <div class="search">自主测试：自由选择测试的方式与试题数目，用以巩固学习效果</div>
            <div class="flex-hei dcl-options-wrap flex-column justify-center">
                <div class="dcl-options-row flex f16">
                    <div class="label color_6">测试的内容：</div>
                    <div class="dcl-radio-group flex-wid">
                        <div class="align-center">
                            <input type="radio">
                            <label>XD-T</label>
                        </div>
                        <div class="align-center">
                            <input type="radio">
                            <label>XN-T</label>
                        </div>
                        <div class="align-center">
                            <input type="radio">
                            <label>FC-T</label>
                        </div>
                        <div class="align-center">
                            <input type="radio">
                            <label>JS-T</label>
                        </div>
                    </div>
                </div>
                <div class="dcl-options-row flex f16" style="padding-top: 10rem;">
                    <div class="label color_6">每组单词数：</div>
                    <div class="dcl-select flex-wid">
                        <select>
                            <option value="">请选择</option>
                            <option value="">1</option>
                            <option value="">2</option>
                        </select>
                    </div>
                </div>

                <button class="dcl-start">开始测试</button>
            </div>
        </div>
    </section>

    <!-- 录入卡号 -->
    <section class="mask enter-mask">
        <div class="enter-wrapper">
            <div class="align-center">
                <div class="label f16">卡号</div>
                <div class="input-wrap align-center flex-wid">
                    <input type="text" class="input-value flex-wid" placeholder="请输入卡号">
                    <span class="iconfont llcard_fill color_71c4 f18"></span>
                </div>
            </div>
            <div class="align-center">
                <div class="label f16">卡密</div>
                <div class="input-wrap align-center flex-wid">
                    <input type="text" class="input-value flex-wid" placeholder="请输入卡密">
                    <span class="iconfont lllock color_71c4 f18"></span>
                </div>
            </div>
            <div class="tips iconfont lllaba color_576f">注意区分卡号，卡密大小写</div>
            <div class="enter-btn">开通</div>
        </div>
    </section>

    <!-- dcl-查看单词学习指导方案 -->
    <section class="mask guidance-mask">
        <div class="guidance-wrapper flex-column">
            <header class="guidance_header">选择年级</header>
            <div class="flex-hei flex-column justify-center align-center">
                <div class="align-center">
                    <div class="label">年级:</div>
                    <select>
                        <option>请选择年级</option>
                        <option>一年级</option>
                        <option>二年级</option>
                        <option>三年级</option>
                    </select>
                </div>
            </div>
            <footer class="guidance_footer justify-center align-center">
                <button>确认</button>
                <button>取消</button>
            </footer>
        </div>
    </section>
</body>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.8.4/layui.min.js"></script> -->
<script src="../../assets/js/echarts.js"></script>
<script src="../../assets/js/pagination.js"></script>
<script>
    $('.close-mask-icon').on('click', function () {
        $('.mask').hide()
    })
    let echartsElement = null
    let echartsTime = null
    let option = {
        title: {
            text: '',
            left: 30
        },
        legend: {
            orient: 'vertical',
            left: 'left'
        },
        grid: {
            left: 10,
            right: "3%",
            top: 50,
            bottom: "20px",
            containLabel: true
        },
        xAxis: {
            type: 'category',
            data: ['', '06-21', '06-22', '06-23', '06-24', '06-25', '06-26', '06-27'],
            boundaryGap: false,
            splitLine: {
                show: true,
                lineStyle: {
                    type: 'dashed',
                },
            },
            axisLabel: {
                show: true,
                color: '#AFB2B9'
            },
            axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            splitLine: {
                show: false
            },
            axisLine: {
                show: true
            }
        },
        series: []
    };

    /**
     *  @param { Function } handleChangeReport 切换学习报告内容
     **/
    $('.echarts-menu').on('click', handleChangeReport)
    function handleChangeReport() {
        let key = $(this).attr('data-echarts')
        $('.report-wrapper[data-report]').hide()
        $(`.report-wrapper[data-report="${key}"]`).show()


        // 清空图表信息
        echartsElement = null

        // 第一个柱状图
        if (key == 0) {
            option = {
                ...option,
                title: {
                    text: '【最近一周内单词学习单词数量图表】',
                    left: 30
                },
                xAxis: { ...option.xAxis, show: true },
                yAxis: { ...option.yAxis, show: true },
                series: [{
                    data: ['', 220, 200, 150, 210, 70, 170, 130],
                    type: 'bar',
                    barWidth: '20rem',
                    itemStyle: {
                        color: '#BFE6F5',
                        borderRadius: [50, 50, 0, 0],
                    },
                }]
            }

            handleDrawEcharts()
        }

        // 第二个柱状图
        if (key == 1) {
            option = {
                ...option,
                title: {
                    text: '【最近一周内单词学习单词数量图表】',
                    left: 30
                },
                xAxis: { ...option.xAxis, show: true },
                yAxis: { ...option.yAxis, show: true },
                series: [{
                    data: ['', 220, 200, 150, 210, 70, 170, 130],
                    type: 'bar',
                    barWidth: '20rem',
                    itemStyle: {
                        color: '#BFE6F5',
                        borderRadius: [50, 50, 0, 0],
                    },
                }]
            }
            handleDrawEcharts(document.querySelector(`.report-wrapper[data-report="1"]>.echarts`))
        }

        // 饼图
        if (key == 2) {
            option = {
                ...option,
                title: {
                    text: '【本月学习时间统计（总计10分40秒）】',
                    left: 'center'
                },
                xAxis: { ...option.xAxis, show: false },
                yAxis: { ...option.yAxis, show: false },
                series: [{
                    type: 'pie',
                    data: [{ value: 30, name: '科目一' }, { value: 40, name: '科目二' }, { value: 30, name: '科目三' }],
                    label: {
                        show: true,
                        type: "outside",
                        formatter: function (params) {
                            // 自定义标签显示内容，使用换行符 \n 进行换行，特定文字加粗并修改字号大小
                            let label = `{b|${params.percent}}{c|%}`


                            return `${label}\n${params.name}： ${params.value}秒`;
                        },
                        rich: {
                            b: {
                                fontWeight: 'bold',
                                fontSize: 18,
                                padding: 5
                            },
                            c: {
                                fontSize: 10,
                                lineHeight: 10,
                            },
                        },
                        emphasis: {
                            show: true
                        }
                    },
                }]
            }
            handleDrawEcharts(document.querySelector(`.report-wrapper[data-report="2"]>.echarts`))
        }

    }

    /**
     * @param { Function } handleDrawEcharts 绘制图表
     **/
    function handleDrawEcharts(chartDom = document.querySelector(`.report-wrapper[data-report="0"]>.echarts`)) {

        if (!echartsElement) {
            echarts.init(chartDom).dispose();
            echartsElement = echarts.init(chartDom);
        }

        option && echartsElement.setOption(option);
    }

    /**
     * @param { Function } handleChangeMainView 切换主视图模块
     * @param { String | Number } key 当前视图标识
     **/
    function handleChangeMainView(key) {
        $('main>.content').hide()
        $(`main>.content[data-main=${key}]`).show()

        // 初始化学习报告图表
        if (key == 4) {
            option.title.text = '【最近一周内单词学习单词数量图表】'
            option.series = [{
                data: ['', 220, 200, 150, 210, 70, 170, 130],
                type: 'bar',
                barWidth: '20rem',
                itemStyle: {
                    color: '#BFE6F5',
                    borderRadius: [50, 50, 0, 0],
                },
            }]

            handleDrawEcharts()
        }
    }
    handleChangeMainView(0)

    // 打开选课中心
    $('.choise-center').on('click', function () {
        $('.choise-mask').show()
    })
    $('.choise').on('click', function () {
        return false
    })

    $('.choise-mask').on('click', function () {
        $('.choise-mask').hide()
    })

    // 选课分类导航切换
    $('.choise-menu-item').on('click', function () {
        $('.choise-menu-item').removeClass('choise-menu-active')
        $(this).addClass('choise-menu-active')
    })

    // 选课-教材版本切换
    $('.column-row').on('click', function () {
        $('.column-row').removeClass('column-active')
        $(this).addClass('column-active')
    })

    // 智能复习

    // 点击打开智能复习弹窗
    $('.study-review').on('click', function () {
        $('.review-mask').show()
        $('.review-wrap').hide()
        $('.review-wrap[data-key=0]').show()
    })
    // 关闭智能复习弹窗
    $('.review-mask, .review-header .lltuichu, .review-save').on('click', function () {
        $('.review-mask').hide()
    })
    $('.review-container').on('click', function () {
        return false
    })

    // 切换单词复习录音准备选项
    $('.l-switch').on('click', function () {
        $(this).attr('data-checked', !JSON.parse($(this).attr('data-checked')))
    })

    // 切换单词复习内容
    $('.review-change').on('click', function () {
        $('.review-wrap').hide()
        $(`.review-wrap[data-key=${$(this).attr('data-key')}]`).show()
        if ($(this).attr('data-key') == '1') {
            $('.review-wrap').removeClass('review-success').addClass('review-ing')
        }
    })

    // 复习录音状态切换
    function handleChangeReview(className) {
        $('.review-wrap').removeClass('review-success').removeClass('review-ing').removeClass('review-recording').addClass(className)

        // 开始录音
        if (className === 'review-recording') {

        }

        // 录音结束
        if (className == 'review-success') {

        }
    }

    // 停止录音
    $('.recording-stop').on('click', function () {


    })


    // 切换我的订阅模块
    $('.subscription-row').on('click', function () {
        let mainKey = $(this).attr('data-main')
        handleChangeMainView(mainKey)
    })

    // 我的订阅二级选项切换
    $('.subscription-list-item').on('click', function () {
        $('.subscription-list-item').removeClass('active')
        $(this).addClass('active')
    })

    // 打开单词本弹窗
    $('.open-vocabulary-dialog').on('click', function () {
        $('.vocabulary-mask').show()

        initPaging()
    })


    // 切换每页数据数量
    $('#select_id').on('change', function () {
        initPaging()
    })

    // 初始化/重置分页
    function initPaging() {
        // 每页多少条数据
        let pageSize = $('#select_id option:selected').val() / 1

        $.pageInit({
            container: '.paging', //容器：默认page
            countPage: Math.ceil(37 / pageSize), //一共有多少页
            showPageCount: Math.ceil(37 / pageSize) >= 5 ? 5 : Math.ceil(37 / pageSize), //显示多少个分页按钮
            nowPage: 1, //当前是第几页
            count: 37, //数据总数
            callBack: function (data) {
                console.log("data___________")
                //当前的页码
                console.log("当前的页码为：" + data)
            }
        });
    }

    $('.vocabulary').on('click', function () {
        return false
    })
    $('.vocabulary-mask').on('click', function () {
        $('.vocabulary-mask').hide()
    })




    // 打开分析测评弹窗
    $('.exam-analyze').on('click', function () {
        return false
    })

    $('.exam-close, .analyze-mask').on('click', function () {
        $('.analyze-mask').hide()
    })

    // 顺序拼写弹窗
    $('.sequence').on('click', function () {
        return false
    })
    $('.sequence-mask-first, .sequence-mask-next').on('click', function () {
        $('.sequence-mask-first').hide()
    })

    $('.intensify').on('click', function () {
        return false
    })
    $('.intensify-mask').on('click', function () {
        $('.intensify-mask').hide()
    })

    // 翻转效果
    $('.vocabulary-card-wrap').on('click', function () {
        $(this).addClass('vocabularyRotate').siblings().removeClass('vocabularyRotate')
    })

    // 走马灯效果
    var currentIndex = 0;


    function moveCarousel(index) {
        var itemWidth = $('.carousel-item').outerWidth();
        $('.swiper-tips').text(`作战任务 ${currentIndex + 1}/${$('.carousel-item').length}`)

        $('.carousel').css('transform', 'translateX(' + (-index * itemWidth) + 'px)');
    }

    $('.carousel-prev').click(function () {
        if (currentIndex <= 0) return
        currentIndex -= 1;
        moveCarousel(currentIndex);
    });

    $('.carousel-next').click(function () {
        if (currentIndex >= $('.carousel-item').length - 1) return
        currentIndex += 1;
        moveCarousel(currentIndex);
    });


    let isLoop = false // 是否正在循环播放
    let loopArr = [0, 0, 0] // 需要播放单词的数组

    /**
     *  @param { Function } loopFn 循环播放
     *  @param { Number } 当前播放的下标
     **/
    let loopFn = (i) => {
        // 播放到最后一个单词结束
        if (i > loopArr.length - 1) {
            isLoop = false
            return
        }

        // 播放逻辑

        console.log(i, '----')

        // 三秒后执行播放下一个单词
        setTimeout(() => {
            loopFn(i + 1)
        }, 3 * 1000)
    }

    /**
     *  @param { Function } handleLoopPlayCode 点击循环播放单词
     **/
    let handleLoopPlayCode = () => {
        // 是否正在循环播放
        if (isLoop) return

        isLoop = true
        loopFn(0)
    }


</script>

</html>